<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <script>{% load static %}</script>
     <!-- 引入 jQuery 和 Bootstrap JavaScript -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 引入 Bootstrap 的 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/locale/zh-cn.js"></script>
    <script src="{% static 'js/moment-timezone-with-data-1970-2030.js' %}"></script>
    <link rel="icon" type="image/png" href='{% static "favicon.ico" %}'>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap 的 CSS 文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* footer {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            background-color: #343a40;
            color: #fff;
            text-align: center;
            padding: 10px;
        } */
        body {padding-top: 50px;}
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
          }
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 
        }
        #popup {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 300px;
            padding: 20px;
            background-color: #ffffff;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            z-index: 9999;
            text-align: center;
          }


        </style>
        
    <title>练字打卡-NewDream</title>
    <script>
      function showPopup(message) {
        var popup = $("#popup");

        // 修改提示窗体的文字
        popup.text(message);

        // 显示提示窗体
        popup.fadeIn();

        // 延迟指定的时间后隐藏提示窗体
        popup.delay(3000).fadeOut();
      }
    </script>
</head>
<body>
    
    <nav class="navbar navbar-expand-md navbar-dark bg-dark shadow">
        <div class="container">
        <a class="navbar-brand" href="/">书法练习得分积分记录</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    </button>
        
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/">首页</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'checkin' %}">打卡</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="{% url 'student_list' %}">学生列表</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="{% url 'score_list' %}">成绩单</a>
                </li>
               {% if user.is_authenticated %}
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        {{ user.username }}
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="{% url 'user_center' %}">个人中心</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="{% url 'logout' %}">退出登录</a></li>
                    </ul>
                </li>
            {% else %}
        <li class="nav-item active">
            <div style="display: flex;">
                <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#loginModal">登录</a>
                <a class="nav-link" href="#" data-bs-toggle="modal" data-bs-target="#signupModal">注册</a>
            </div>
        </li>
    {% endif %}
            </ul>
        </div>
    </div>
    </nav>
    <div class="modal-dialog modal-sm" id="popup" style="display: none;">这是一个提示窗体</div>
<!-- 登录弹窗 -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="loginModalLabel">登录</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- 在这里放置登录表单 -->
          <form method="post" action="{% url 'login_v' %}">
            {% csrf_token %}
            <div class="form-group">
              <label for="username">用户名:</label>
              <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="form-group">
              <label for="password">密码:</label>
              <input type="password" class="form-control" id="password" name="password">
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">登录</button>
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
          </form>
          
        </div>
        
      </div>
    </div>
  </div>
  
  <!-- 注册弹窗 -->
  <div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="signupModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="signupModalLabel">注册</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <!-- 在这里放置注册表单 -->
          <form method="post" action="{% url 'signup' %}">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" class="form-control" name="username" id="username">
            </div>
            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" class="form-control" name="email" id="email">
            </div>
            <div class="form-group">
                <label for="password1">密码:</label>
                <input type="password" class="form-control" name="password1" id="password1">
            </div>
            <div class="form-group">
                <label for="password2">确认密码:</label>
                <input type="password" class="form-control" name="password2" id="password2">
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">注册</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </form>
        
        
          
        </div>
        
      </div>
    </div>
  </div>
  
    <div class="container mt-4">
        <!-- 内容区域 -->
        <h1>精耕细作，字字珠玑</h1>
        <p>不求快，但求好。 </p>
        
          {% if messages %}
            <ul class="messages">
              {% for message in messages %}
                <li{% if message.tags %} class="alert alert-warning"{% endif %}>{{ message }}</li>
              {% endfor %}
            </ul>
          {% endif %}
        </div>
        

        <div class="container mt-4">
          
            {% block content %}
            {% endblock %}
        </div>
        <!-- 内容区域结束 -->
    </div>

</body>

<footer class="bg-dark text-light py-3"  >
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h3>联系我们</h3>
          <p>地址：大理镇广武路99号</p>
          <p>电话：186-0872-0186</p>
        </div>
        <div class="col-md-6">
          <h3>开发相关</h3>
          <p>专门为大理一小二(1)班的同学们开发的书法练习打卡积分网站。</p>
          <p>项目已开源<a class="nav-link" target="_blank" href="https://github.com/Myeeoo/Student_Calligraphy_practice.git">GitHub</a></p>
        </div>
        <ul>All Copy Right by 大理新梦圆 's eeoo</ul>
      </div>
    </div>
  </footer>
</html>
